<template>
  <page-header title="每日签到" background="#FCEAD3" />
  <view class="day-sign">
    <view class="banner">
      <image :src="addDomain('/static/daySign.png')"></image>
      <view class="point-number title">{{point}}
        <text class="text">积分</text>
      </view>
    </view>
    <view class="box">
      <view class="card">
        <view class="title">已连续签到{{alreadySign}}天
          <text class="text" @click="open()">积分明细</text>
        </view>
        <view class="content">
          <view class="line"></view>
          <view class="sign">
            <view class="group" v-for="index in 7" :key="index">
              <view :class="{active:index<=alreadySign,noactive:index>alreadySign}">+{{filterRulePoint("签到")}}</view>
              <view class="text" v-if="index==1">今天</view>
              <view class="text" v-else>第{{index}}天</view>
            </view>

          </view>
          <view class="button">今日已签到</view>
        </view>
      </view>

      <view class="card">
        <view class="title">每日任务</view>
        <view class="item">
          <view class="icon">
            <image src="../../static/tabbar/icon1.png"></image>
          </view>
          <view class="group">
            <view class="title">每日签到
              <text class="point">+{{filterRulePoint("签到")}}</text>
            </view>
            <view class="text">每日进行签到会获得积分哦</view>
          </view>
          <view class="button">
            已完成
          </view>
        </view>
        <view class="item">
          <view class="icon">
            <image src="../../static/tabbar/icon2.png"></image>
          </view>
          <view class="group">
            <view class="title">每日浏览
              <text class="point">+{{filterRulePoint("每日浏览")}}</text>
            </view>
            <view class="text">进入粉丝社区页面浏览10s以上</view>
          </view>
          <view class="button" @click="gotoActivity()">
            去浏览
          </view>
        </view>
        <view class="item">
          <view class="icon">
            <image src="../../static/tabbar/icon3.png"></image>
          </view>
          <view class="group">
            <view class="title">每日分享
              <text class="point">+{{filterRulePoint("每日分享")}}</text>
            </view>
            <view class="text">将小程序分享到小程序或者朋友圈</view>
          </view>
          <button class="shareButton" open-type="share">
            去分享
          </button>
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="popup" type="center" borderRadius="10px" background-color="white">
    <view class="popup">
      <view class="title">积分明细</view>
      <view class="table">
        <view class="header">
          <view class="one">任务</view>
          <view class="two">积分</view>
          <view class="three">时间</view>
        </view>
        <view class="body">
          <scroll-view scroll-y="true" style="height: 500rpx;" @scrolltolower="onLower">
            <view class="item" v-for="(item,index) in Data.list" :key="index">
              <view class="one" :style="{textAlign:byLength(item.reason)}">{{item.reason}}</view>
              <view class="two">{{item.num > 0 ? '+'+item.num : item.num}}</view>
              <view class="three">{{String(item.createTime).substring(0,16)}}</view>
            </view>
            <view v-if="isLoadAll && Data.list.length>0" class="nomore">
              没有更多了，看看别的吧
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="sign" type="center" borderRadius="10px" background-color="white">
    <view class="signBox">
      <image :src="addDomain('/static/daySignPopup.png')"></image>
      <view class="title">签到成功！</view>
      <view v-if="alreadySign == 7">
        <view class="point">+{{filterRulePoint("连续签到七天")+filterRulePoint("签到")}}
          <view class="content">积分</view>
        </view>
        <view class="tips" style="font-size: 28rpx;left: 45rpx;">已经连续签到7天，获得额外奖励{{filterRulePoint("连续签到七天")}}积分。</view>
      </view>
      <view v-else>
        <view class="point">+{{filterRulePoint("签到")}}
          <view class="content">积分</view>
        </view>
        <view class="tips">已连续签到{{alreadySign}}天，再连续签到{{7-alreadySign}}天有惊喜！</view>
      </view>
      <view class="button" @tap="close">开心收下</view>
    </view>
  </uni-popup>
</template>

<script setup>
  import {
    onMounted,
    ref
  } from 'vue';
  const alreadySign = ref(0)
  const rules = ref([])
  onShow(() => {
    pointRule()
    toSign()
  })
  const sign = ref(null)
  const popup = ref(null)
  const point = ref(0)
  const open = () => {
    popup.value.open()
  }
  const close = () => {
    sign.value.close()
  }

  /**
   * 签到
   */
  const toSign = () => {
    http.request({
      url: '/mall4cloud_point/u/point/sign',
      method: 'GET'
    }).then((res) => {
      alreadySign.value = extractNumber(res)
      sign.value.open()
      pointLog()
      getUserInfo()
    }).catch(res => {
      if (res.data == null) {
        return
      }
      alreadySign.value = extractNumber(res.data)
      pointLog()
      getUserInfo()
    })
  }
  /**
   * 查询条件
   */
  const Data = ref({})
  const queryData = ref({
    pageSize: 10,
    pageNum: 1,
    columns: "createTime",
    orders: "DESC"
  })
  /**
   * 获取积分日志
   */
  const pointLog = () => {
    http.request({
      url: '/mall4cloud_point/u/point/list',
      method: 'GET',
      data: queryData.value
    }).then((res) => {
      if (queryData.value.pageNum === 1) {
        Data.value = res
      } else {
        let list = Data.value.list
        list.push(...res.list)
        Data.value.list = list
      }
      if (queryData.value.pageNum === Data.value.pages) {
        isLoadAll.value = true
      }
    })
  }
  /**
   * 获取积分规则
   */
  const pointRule = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/u/point/ua/rule',
      method: 'GET'
    }).then((res) => {
      rules.value = res;
    })
  }
  /**
   * 获取相应规则积分
   */
  const filterRulePoint = (str) => {
    let arr = rules.value.find(item => item.name == str)
    if (arr != undefined) {
      return arr.point
    }
    return '暂无定义'
  }
  /**
   * 日志触底
   */
  const isLoadAll = ref(false)
  const onLower = () => {
    if (queryData.value.pageNum < Data.value.pages) {
      queryData.value.pageNum = queryData.value.pageNum + 1
      pointLog()
    } else {
      isLoadAll.value = true
    }
  }
  /**
   * 提取数字
   */
  const extractNumber = (str) => {
    const regex = /\d+/g;
    const matches = str.match(regex);
    // 将匹配到的数字转换为数字类型并返回
    if (matches) {
      return matches[0]
    } else {
      return []
    }
  }
  /**
   * 跳转社区
   */
  const gotoActivity = () => {
    uni.switchTab({
      url: '/pages/activity-community/activity-community'
    })
  }
  /**
   * 获取个人信息
   */
  const getUserInfo = () => {
    http.request({
      url: '/mall4cloud_user/a/user/ma/user_detail_info',
      method: 'GET',
    }).then((res) => {
      point.value = res.point
      uni.hideLoading()
    })
  }
  // 添加图片域名
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }
  onShareAppMessage((options) => {
    http.request({
      url: '/mall4cloud_point/u/point/share',
      method: 'GET',
    })
    return {
      title: '山海台秀提醒你签到领积分啦!', //分享的标题
      imageUrl: 'http://minio.taishow.cc:9000/mall4cloud/2024/05/15/03fec04ec89248b48aad63a63b57870e',
      path: 'pages/index/index', //点击分享链接之后进入的页面路径
    }
  })
  //2.配置分享到朋友圈
  onShareTimeline(() => {
    return {
      title: '山海台秀提醒你签到领积分啦!', //分享的标题
      imageUrl: 'http://minio.taishow.cc:9000/mall4cloud/2024/05/15/03fec04ec89248b48aad63a63b57870e',
      query: 'pages/index/index', //点击分享链接之后进入的页面路径
    }
  })

  const byLength = (str) => {
    if (String(str).length > 9) {
      return 'left'
    } else {
      return 'center'
    }
  }
</script>

<style lang="scss" scoped>
  @use 'activity-sign';
</style>
